<template>
	<view>
		<!-- 搜索框 -->
		<view class="input-body">
			<text @click="tzSeacher" class="input-sarcher"></text>
			<span @click="tzSeacher" class="ioc-spne">
				<img class="ioc-img" src="../../static/搜索.png">
				充宝宝商品抢购
			</span>
		</view>

		<view class="swapper-class">

			<!-- 轮播图-->
			<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="4000" duration="400" style="height:100%;bottom:2.5%; width:96%;position: relative;left:2%;">
				<swiper-item style="border-radius: 5px;" v-for="(item,index) in 2" :key="index">
					<image :src="'../../static/bj.png'" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 首页推荐-->
		<view class="sye-tj">
			<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop>
					<radio-group class="block" @change="Gridchange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in 4" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{index +4}} 列</view>
									<radio class="round" :value="(index + 4) + ''"
										:class="gridCol==index+4?'checked':''" :checked="gridCol==index+4"></radio>
								</label>
							</view>
						</view>
					</radio-group>
					<view class="cu-list menu text-left solid-top">
						<view class="cu-item" @click="ontz">
							<view class="content">
								<text class="text-grey">边框</text>
							</view>
							<view class="action">
								<switch @change="Gridswitch" :class="gridBorder?'checked':''"
									:checked="gridBorder?true:false"></switch>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" @click="ontz(item.path)" v-for="(item,index) in cuIconList" :key="index">
					<view :class="['cuIcon-' ,'text-' + item.color]">
						<img :src="item.img" class="imgs-src-class">
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 商品推荐 -->
		<view class="shops-body">
			<view class="shops-xq" v-for="(item,index) in shops" @click="tzxq(item.spId)">
				<!-- 商品图片-->
				<img class="shop-img" :src="item.spImg">
				<!-- 商品名-->
				<text class="shop-name-nc">
					<view class="shop-name-nc-wz">{{item.spName}}</view>
				</text>
				<!-- 商品价格-->
				<view class="price-shop">
					<span>￥{{item.spSellingPrice}}</span>
					<!-- 商品销量 -->
					<text class="xiaoliang-class">销量:{{item.spSales}}</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<span style="opacity: 0;">我是底部</span>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.$url + "/frontend",
				cuIconList: [{
					name: '每日秒杀',
					img: "../../static/ioc/ms.png",
					path: "../spike/spike"
				}, {
					name: '热门推荐',
					img: "../../static/ioc/rm.png",
						path: "../popular-recommendation/popular-recommendation"
				}, {
					name: '最新上架',
					img: "../../static/ioc/zx.png",
					path:"../latest-recommended/latest-recommended"
				}, {
					name: '人气商品',
					img: "../../static/ioc/rq.png",
					path:"../popular-product/popular-product"
				}, ],
				shops: [],
				modalName: null,
				gridCol: 4,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		onShow() {
			 this.list()
			 document.body.style.backgroundColor = "#f1f1f1"
		},
		created() {
			this.list()
			document.body.style.backgroundColor = "#f1f1f1"
		},
		methods: {
			tzSeacher() {
				console.log("sss")
				uni.navigateTo({
					url: '../search-shop/search-shop'
				})
			},
			tzxq(spId) {
				uni.navigateTo({
					url: "../index/index?spId=" + spId
				})
			},
			list() {
				uni.request({
					url: `${this.url}/shop/sye`,
					method: "GET",
					success: (res) => {
						this.shops = res.data.data.data
						//console.log(this.shops)
					}
				})
			},
			ontz(path) {
				console.log(path)
				uni.navigateTo({
					url: path
				});
			}
		}
	}
</script>

<style scoped>
	.xiaoliang-class {
		right: 5%;
		position: absolute;
		color: #585858;
		font-size: 10px;
	}

	.dbu {
		position: relative;
		width: 100px;
		height: 200px;
	}

	.shops-body {
		position: relative;
		float: left;
		width: 100%;
		top: 1px;
	}

	.price-shop {
		position: relative;
		margin-left: 3%;
		top: 1%;
		color: red;
		font-size: 15px;
	}

	.shop-name-nc-wz {
		width: 97%;
		margin-left: 3%;
		font-size: 15px;
		;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.shop-name-nc {
		position: relative;
	}

	.shop-img {
		position: relative;
		width: 100%;
		height: 170px;
	}

	.shops-xq {
		margin-left: 5%;
		margin-top: 20px;
		position: relative;
		width: 43%;
		float: left;
		background-color: #ffffff;
		height: 220px;
		border-radius: 10px;
	}

	.imgs-src-class {
		position: relative;
		width: 25px;
		height: 25px;
	}

	.sye-tj {
		position: relative;
	}

	.swapper-class {
		position: relative;
		height: 260px;
	}

	.list-item-img {
		width: 15%;
	}

	.list-item {
		position: relative;
	}

	.list-body {
		position: relative;
		float: left;
	}

	.sye {
		position: relative;

	}

	.input-body {
		position: relative;
		top: 10px;
		width: 100%;
	}

	.input-sarcher {
		display: flex;
		position: relative;
		width: 98%;
		height: 40px;
		left: 1%;
		border-radius: 5px;
		background-color: #ffffff;
	}

	.ioc-img {
		position: relative;
		float: left;
		width: 6%;

	}

	.ioc-spne {
		position: relative;
		bottom: 30px;
		left: 38%;
		text-align: center;
		line-height: 22px;
	}
</style>
